<template>
    <div class="shopping_class">
        <div class="box">
            <!--<div v-for="item in 4"  :key="item">-->
            <div class="box1" v-for="shop in shoppingList">
                <img :src="shop.img_url"  width="220" height="75%" @click="gotodetial(shop)">
                <div style="text-align: center">{{shop.goods_name}}
                    </div>
                <div style="text-align: center">{{shop.name_chinese}}</div>
                <div style="text-align: center">￥{{shop.pice}}</div>
            </div>
            </div>

        </div>
</template>

<script>
    import {newGoodsApi} from '@/api/ljy_port/shiyan'
    export default {
        name: "shopping_classily",
        data() {
            return {
                shoppingList: []
            }
        },
        methods:{
            gotodetial(row){
                this.$router.push({
                    path:'/detail',
                    name:'detail',
                    query: {dialogInfo: JSON.stringify(row)}
                });
            },
            ljy() {
              newGoodsApi(1, 4).then(req => {
                    console.log(req.data.content)
                  this. shoppingList=req.data.content

                })
            }
        },
        created() {
             this.ljy();
        },
    }
</script>

<style lang="scss" scoped>
    .shopping_class {
        margin: 0 auto;
        width: 1200px;
        height: 325px;
        border: 1px solid white;
        .box{
            width:78%;
            margin:0 auto;
            .box1{
                width:220px;
                height:310px;
                margin: 5px;
                float: left;
                border: 1px solid white;
                background-color:#fafafa;
            }
        }

    }
</style>
